<!--  -->
<template>
  <div class="download-item-form" v-if="!globalLoading">
    <div class="form-left">
      <el-form-item :label="downloadName" :required="true" :error="errorMessage">
        <el-input v-model="title" :value="title" @change="titleChange" placeholder="输入长度不超过200个字符的名称" maxlength="200" size="medium" style="width:430px;">
        </el-input>
      </el-form-item>

      <el-form-item label="下载分类">
        <el-select v-model="download.categoryId" placeholder="请选择" size="medium" style="width:430px;">
          <el-option label="未分类" :value="-1">
          </el-option>
          <template v-for="item in categories[0]">
            <el-option :key="item.id" :label="item.name" :value="item.id"></el-option>
            <template v-for="ite in categories[item.id]">
              <el-option style="padding-left:36px;" :key="ite.id" :label="ite.name" :value="ite.id"></el-option>
              <template v-for="it in categories[ite.id]">
                <el-option style="padding-left: 54px;" :key="it.id" :label="it.name" :value="it.id"></el-option>
              </template>
            </template>
          </template>
        </el-select>
      </el-form-item>

      <el-form-item label="是否显示" style="margin-top:-5px; margin-bottom:10px;">
        <el-switch v-model="download.base.isShow" active-color="#13ce66">
        </el-switch>
      </el-form-item>

      <el-form-item label="是否置顶" style="margin-top:-5px; margin-bottom:10px;">
        <el-switch v-model="download.base.isTop" active-color="#13ce66">
        </el-switch>
      </el-form-item>

      <el-form-item v-for="(item, index) in downloadAttr" :key="index"
        :label="item.title">
        <el-input v-model="item.content" size="medium" style="width:430px;"></el-input>
      </el-form-item>

      <!-- <el-form-item label="下载地址类型" style="margin-bottom:0px;">
        <el-radio-group size="mini" v-model="download.base.attrStyle">
          <el-radio :label="0">本地上传</el-radio>
          <el-radio :label="1">外链地址</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="下载外链地址" v-if="download.base.attrStyle === 1" class="requireStar">
          <el-input size="medium" v-model.trim="download.base.externallink" style="width:430px;"></el-input>
      </el-form-item> -->

      <!-- <el-form-item label="添加文件" v-if="download.base.attrStyle === 0" class="requireStar"> -->
      <el-form-item label="添加文件" class="requireStar">
        <el-button type="primary" size="small" @click.stop="chooseFile">点击上传文件</el-button>
        <span class="spn">仅支持txt,pdf,xla,xls,xlsx,xlt,xlw,zip,rar,doc,docx格式</span>
        <div v-if="download.file && download.file.id">
          <div class="dffr">
            <div class="file-image-icon">
              <img :src="require('@/assets/images/icon_suffix/'+download.file.suffix+'.png')" alt="file-icon"
                style="max-width:40px;max-height:40px;">
            </div>
            <div class="file-name black">
              {{download.file.originalFilename}}
            </div>
            <div class="opt">
              <el-button type="text" @click.stop="deleteFile()"><i class="el-icon-delete"></i></el-button>
            </div>
          </div>
        </div>
      </el-form-item>
    </div>

    <!-- 选择资源文件 -->
    <ChooseRepertory ref="chooseRepertory" />
  </div>
</template>

<script>
import ChooseRepertory from '@/components/common/repertory/ChooseRepertory.vue'
export default {
  props: {
    download: {
      type: Object
    },
    globalLoading: {
      type: Boolean
    },
    changeDownload: {
      type: Function
    },
    categories: {
      type: Object
    }
  },
  data () {
    return {
      title: '',
      // 错误信息
      errorMessage: ''
    }
  },
  watch: {
    download: {
      handler (newValue, oldValue) {
        if (newValue.base.id === 0 && newValue.file.originalFilename !== oldValue.file.originalFilename) {
          if (!this.title || this.title === oldValue.file.originalFilename) {
            this.title = newValue.file.originalFilename
          }
        } else {
          if (newValue.base.id > 0 && newValue.attr && newValue.attr.length > 0) {
            newValue.attr.map(element => {
              if (parseInt(element.type) === 3 && (!this.title || this.title === oldValue.file.originalFilename)) {
                this.title = element.content
              }
            })
          }
        }
        // if (newValue.attr && newValue.attr.length > 0) {
        //   newValue.attr.map(element => {
        //     if (parseInt(element.type) === 3) {
        //       this.title = element.content
        //     }
        //   })
        // }
      },
      deep: true
    }
  },
  computed: {
    downloadAttr () {
      return this.download.attr.filter(item => parseInt(item.type) === 0)
    },
    downloadName () {
      if (!this.download.attr) {
        return '下载名称'
      }
      let item = this.download.attr.find(element => {
        return parseInt(element.type) === 3
      })
      if (!item) {
        return '下载名称'
      }
      return item.title
    }
  },
  methods: {
    // 选择下载资源文件
    chooseFile () {
      this.$refs['chooseRepertory'].show({ title: '选择下载系统资源文件', where: { type: [1] }, fixedCondition: { type: true } }, (repertoryList) => {
        if (repertoryList.length > 0) {
          let repertory = repertoryList[0]
          let file = {
            id: repertory.id,
            originalFilename: repertory.originalFilename,
            suffix: repertory.suffix
          }
          let download = JSON.parse(JSON.stringify(this.download))
          let oldfileName = download.file.originalFilename
          download.file = file
          download.attr.forEach(element => {
            if (parseInt(element.type) === 3 && (!this.title || this.title === oldfileName)) {
              element.content = download.file.originalFilename
            }
          })
          this.changeDownload(download)
        }
      })
    },
    // 显示错误以及 focus
    showErrorMessage (errorMessage) {
      this.errorMessage = errorMessage
    },
    // 名称表单改变时回写 download 数据
    titleChange () {
      let download = JSON.parse(JSON.stringify(this.download))
      download.attr.forEach(element => {
        if (parseInt(element.type) === 3) {
          element.content = this.title.replace(/^(\s|\u00A0)+/, '').replace(/(\s|\u00A0)+$/, '')
        }
      })
      this.changeDownload(download)
    },
    // 删除 file
    deleteFile () {
      let download = JSON.parse(JSON.stringify(this.download))
      download.file = {}
      this.changeDownload(download)
    }
  },
  components: {
    ChooseRepertory
  }
}

</script>

<style scoped lang="scss">
.download-item-form {
  display: flex;
  flex-flow: row;
}
.download-item-form .opt {
  margin-left: 28px;
  .el-icon-delete{
    font-size: 18px;
    &:hover{
      color:#0480FB;
    }
  }
}
.download-item-form /deep/ .el-form-item{
  margin-bottom: 15px;
}
.spn{
  margin-left: 15px;
  color: #666;
  font-size: 12px;
}
.dffr{
  margin-top: 5px;
  line-height: 1.3;
  }
.file-name{
  margin-left: 10px;
  margin-top:8px;
  line-height: 2;
}
.requireStar /deep/ .el-form-item__label:before {
  content: '*';
  color: #f56c6c;
  margin-right: 4px;
}
</style>
